<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>管理定时群发</title>
    <link rel="stylesheet" href="../../assest/plugins/bootstrap/css/bootstrap.css"/>
    <link rel="stylesheet" href="../../assest/plugins/bootstrap-datepicker/bootstrap-datepicker.css"/>
    <link rel="stylesheet" type="text/css" href="../../assest/css/win.css"/>
    <link rel="stylesheet" type="text/css" href="../../assest/plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="./cloud.css">
    <link rel="stylesheet" type="text/css" href="./sendTimer.css">
</head>
<body style="overflow:auto;">
<div class="send-timer" id="SendTimer">
    <div class="page-form">
        <label>群发状态：
            <select class="form-control width-1" v-model="param.status">
                <option value="">全部</option>
                <option value="0">等待群发</option>
                <option value="-1">群发失败</option>
                <option value="1">群发成功</option>
            </select>
        </label>
        <input class="form-control width-2" list="accountsOptionList" v-model="param.nickName" placeholder="微信名" type="text">
        <datalist id="accountsOptionList">
            <option value="{{nickName}}" label="{{userName}}" v-repeat="accounts"/>
        </datalist>
        <button v-on="click:search" class="btn btn-primary">搜索</button>
    </div>
    <div class="loading-container">
        <table class="table table-bordered table-striped">
            <thead>
            <tr>
                <td width="100">微信名</td>
                <td width="100">微信号</td>
                <td width="140">群发时间</td>
                <td width="65">共几篇</td>
                <td width="350">首篇标题</td>
                <td width="80">状态</td>
                <td>失败原因</td>
                <td width="110">操作</td>
            </tr>
            </thead>
            <tbody>
            <tr v-repeat="item:list">
                <td title="{{item.username}}">{{item.wx_name }}</td>
                <td title="{{item.username}}">{{item.wx_id }}</td>
                <td>{{item.send_time | toDate}}</td>
                <td>{{item.total_count}}</td>
                <td>{{item.title1}}</td>
                <td>{{item.status | statusText}}</td>
                <td>{{item.fail_message}}</td>
                <td>
                    <span class="btn btn-link" v-if="item.status!=1" v-on="click:edit(item)">修改设置</span>
                    <span class="btn btn-link" v-if="item.status==0" v-on="click:cancel(item)">取消</span>
                </td>
            </tr>
            </tbody>
        </table>
        <div class="loading-warp" v-if="loading">
            <div class="loading-content">
                <div class="spinner">
                    <div class="rect1"></div>
                    <div class="rect2"></div>
                    <div class="rect3"></div>
                    <div class="rect4"></div>
                    <div class="rect5"></div>
                </div>
                <p>加载数据中</p>
            </div>
        </div>
    </div>

    <div class="data-empty-tips" v-if="!loading && list.length==0">
        <img v-attr="src: '../../assest/img/empty-tips.png'">
        <p>您还未在设置过定时群发</p>
    </div>

    <div class="load-more" v-class="show-me: pager.current<pager.total && loading==false" v-on="click:loadMore()">加载更多</div>

    <div class="edit-container modal-scrollable" v-class="show:showEdit">
        <div class="modal in" style="display: block; width: 508px; margin-left: -253px; margin-top: -230.5px;">
            <div class="modal-header">
                <button type="button" class="close" v-on="click:showEdit=false">×</button>
                <h4 class="modal-title">设置定时群发</h4>
            </div>
            <div class="modal-body" style="overflow: auto; height: 220px;">
                <div class="form-group">
                    <span class="form-label">群发素材</span>
                    <button class="btn btn-success" v-on="click:chooseMaterial">更换素材</button>
                </div>
                <div class="form-group">
                    <span class="form-label">群发时间</span>
                    <input id="send_date" class="form-control datepicker width-1" v-model="editItem.send_date" maxlength="10" placeholder="日期" type="text">
                    <input class="form-control" v-model="editItem.send_hour" maxlength="2" placeholder="时" type="text">
                    ：
                    <input class="form-control" v-model="editItem.send_minute" maxlength="2" placeholder="分" type="text">
                </div>
                <div class="form-group">
                    <span class="form-label">手机号</span>
                    <input class="form-control width-2" v-model="editItem.mobile" placeholder="填写后将群发异常反馈给您，方便及时处理" type="text">
                </div>
                <div class="form-header">
                    群发协议及群发规则 <i class="fa fa-chevron-down"></i>
                </div>
                <div class="form-group rule-wrap">
                    <label>
                        <input name="agree" v-model="editItem.agree" type="checkbox">
                        定时群发需要关闭公众号的登录保护和群发保护，并且您公众号的登录信息将以加密的形式保存在微小宝云端。微小宝声明绝不会使用或透露您的信息给第三方。
                    </label>

                    <p>
                        群发规则：微小宝将在您设置的时间前后10分钟内为您群发指定素材，如果尝试多次仍然群发失败，将会短信通知您检查处理。
                    </p>

                    <p>
                        勾选后即表示您已经接受微小宝的上述服务条件。
                    </p>
                </div>
            </div>
            <div class="modal-footer">
                <a class="btn btn-primary _modal_sure_btn" v-on="click:updateSet">确定</a>
                <a class="btn btn-default" v-on="click:showEdit=false">关闭</a>
            </div>
        </div>
    </div>

    <div class="edit-container modal-scrollable" v-class="show:showSelectMaterial">
        <div class="modal in" style="display: block; width: 1000px; margin-left: -469px; margin-top: -320px;">
            <div class="modal-header">
                <button type="button" class="close" v-on="click:showSelectMaterial=false">×</button>
                <h4 class="modal-title">选择素材</h4>
            </div>
            <div class="modal-body" style="overflow: auto; height: 500px;">
                <div class="material-pager">
                    <span class="pager-btn" v-on="click:materialListGoPrev" v-if="materialListParam.currentPage>1"><i class="fa fa-caret-left"></i></span>
                    <span class="pager-text">{{materialListParam.currentPage}} /  {{materialListParam.totalPage}} </span>
                    <span class="pager-btn"  v-on="click:materialListGoNext" v-if="materialListParam.currentPage<materialListParam.totalPage"><i class="fa fa-caret-right"></i></span>
                    <input class="pager-num" v-model="materialListParam.currentPageGo" type="text"/>
                    <span class="pager-btn" v-on="click:materialListGo" >跳转</span>
                </div>
                <div class="cloud-material-list">
                    <div class="col" v-repeat="col:list_material_heights">
                        <div class="cloud-material-part pull-left" v-on="click:changeNowSelect(material_item)" v-class="material_item.col" v-repeat="material_item:materialData.item | filterBy $key in col">
                            <div class="material-title">
                                <p>创建时间：{{material_item.create_time|toDate}}</p>
                            </div>
                            <ul class="material-content">
                                <li class="material-item" v-repeat="list_material_this_article:material_item.multi_item">
                                    <img class="material-item-cover" v-attr="src:list_material_this_article.cover" />
                                    <h4 class="material-item-title" v-html="list_material_this_article.title"></h4>
                                </li>
                            </ul>
                            <div class="material-picker" v-class="checked:nowSelectMaterial.app_id==material_item.app_id">
                                <i class="fa fa-check"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="loading-warp loading-warp-size-2" v-if="loadingMaterialList">
                <div class="loading-content">
                    <div class="spinner">
                        <div class="rect1"></div>
                        <div class="rect2"></div>
                        <div class="rect3"></div>
                        <div class="rect4"></div>
                        <div class="rect5"></div>
                    </div>
                    <p>加载数据中</p>
                </div>
            </div>
            <div class="modal-footer">
                <a class="btn btn-primary _modal_sure_btn" v-on="click:updateCheckedMaterial">确定</a>
                <a class="btn btn-default" v-on="click:showSelectMaterial=false">关闭</a>
            </div>
        </div>
    </div>

</div>
<script type="text/javascript" src="../../assest/plugins/jquery.min.js"></script>
<script type="text/javascript" src="../../assest/plugins/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../../assest/plugins/bootstrap-datepicker/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="../../assest/plugins/vue.min.js"></script>
<script type="text/javascript" src="../../assest/plugins/win.js"></script>
<script type="text/javascript" src="./sendTimer.js"></script>

<script>
    init();
</script>
</body>
</html>